import React from "react";
import DemoComponent from "../../../src";
import "./index.less";

import Box from "@mui/material/Box";
import { BrowserRouter, useLocation, Route, Routes, Link, Outlet } from "react-router-dom";
import Button from "@mui/material/Button";

/**
 * 已用开发中组件，调试或展示
 */

const crumbs1 = [{ children: "MUI", path: "/mui" }, { children: "Core" }, { children: "Breadcrumbs" }];

const Page1 = () => {
  return (
    <>
      {/* 页面1 */}
      <div className="page page1">
        <div className={"title"}>here is page1</div>
        <Button key={"page1-1"} variant="text">
          <Link to={"/page1-1"}>page1-1</Link>
        </Button>
        <Button key={"page1-2"} variant="text">
          <Link to={"/page1-2"}>page1-2</Link>
        </Button>
        <Button key={"page1-3"} variant="text">
          <Link to={"/page1-3"}>page1-3</Link>
        </Button>
        <Outlet />
      </div>
    </>
  );
};

const Page2 = () => {
  return (
    <>
      {/* 页面2 */}
      <div className="page page2">
        <div className={"title"}>here is page2</div>
        <Button key={"page2-1"} variant="text">
          <Link to={"/page2/page2-1"}>page2-1</Link>
        </Button>
        <Button key={"page2-2"} variant="text">
          <Link to={"/page2/page2-2"}>page2-2</Link>
        </Button>
        <Button key={"page2-3"} variant="text">
          <Link to={"/page2/page2-3"}>page2-3</Link>
        </Button>
        <Outlet />
      </div>
    </>
  );
};

const Page3 = () => {
  return (
    <>
      {/* 页面3 */}
      <div className="page page3">
        <div className={"title"}>here is page3</div>
        <Button key={"page3-1"} variant="text">
          <Link to={"/page3/page3-1"}>page3-1</Link>
        </Button>
        <Button key={"page3-2"} variant="text">
          <Link to={"/page3/page3-2"}>page3-2</Link>
        </Button>
        <Button key={"page3-3"} variant="text">
          <Link to={"/page3/page3-3"}>page3-3</Link>
        </Button>
        <Outlet />
      </div>
    </>
  );
};

const Page1_1 = () => {
  return (
    <div className="page page1-1">
      {/* 页面1-1 */}
      <div className={"title"}>here is page1-1</div>
    </div>
  );
};

const Page1_2 = () => {
  return (
    <div className="page page1-2">
      {/* 页面1-2 */}
      <div className={"title"}>here is page1-2</div>
    </div>
  );
};

const Page1_3 = () => {
  return (
    <div className="page page1-3">
      {/* 页面1-3 */}
      <div className={"title"}>here is page1-3</div>
    </div>
  );
};

const Page2_1 = () => {
  return (
    <div className="page page2-1">
      {/* 页面2-1 */}
      <div className={"title"}>here is page2-1</div>
    </div>
  );
};

const Page2_2 = () => {
  return (
    <div className="page page2-2">
      {/* 页面2-2 */}
      <div className={"title"}>here is page2-2</div>
    </div>
  );
};

const Page2_3 = () => {
  return (
    <div className="page page2-3">
      {/* 页面2-3 */}
      <div className={"title"}>here is page2-3</div>
    </div>
  );
};

const Page3_1 = () => {
  return (
    <div className="page page3-1">
      {/* 页面3-1 */}
      <div className={"title"}>here is page3-1</div>
    </div>
  );
};

const Page3_2 = () => {
  return (
    <div className="page page3-2">
      {/* 页面3-2 */}
      <div className={"title"}>here is page3-2</div>
    </div>
  );
};

const Page3_3 = () => {
  return (
    <div className="page page3-3">
      {/* 页面3-3 */}
      <div className={"title"}>here is page3-3</div>
    </div>
  );
};

const routeList = [
  {
    page: "",
    name: "页面1"
  },
  {
    page: "page2",
    name: "页面2"
  },
  {
    page: "page3",
    name: "页面3"
  },
  {
    page: "page1-1",
    name: "页面1-1"
  },
  {
    page: "page1-2",
    name: "页面1-2"
  },
  {
    page: "page1-3",
    name: "页面1-3"
  },
  {
    page: "page2-1",
    name: "页面2-1"
  },
  {
    page: "page2-2",
    name: "页面2-2"
  },
  {
    page: "page2-3",
    name: "页面2-3"
  },
  {
    page: "page3-1",
    name: "页面3-1"
  },
  {
    page: "page3-2",
    name: "页面3-2"
  },
  {
    page: "page3-3",
    name: "页面3-3"
  }
];

const DEMO = function () {
  const props = {
    title: "title",
    subTitle: "here is subTitle"
  };

  return (
    <>
      <Box sx={{ p: 2 }}>
        <DemoComponent {...props} crumbs={crumbs1} />
      </Box>
      <Box sx={{ p: 2, border: "1px dashed grey" }}>
        <div className="wrapper">
          <BrowserRouter>
            <DemoComponent.Provider useLocation={useLocation} routeList={routeList}>
              <div>
                <DemoComponent {...props} />
                <Button key={"page1"} variant="text">
                  <Link to={"/"}>page1</Link>
                </Button>
                <Button key={"page2"} variant="text">
                  <Link to={"/page2"}>page2</Link>
                </Button>
                <Button key={"page3"} variant="text">
                  <Link to={"/page3"}>page3</Link>
                </Button>
                <Routes>
                  <Route path="/" element={<Page1 />}>
                    <Route path="/page1-1" element={<Page1_1 />}></Route>
                    <Route path="/page1-2" element={<Page1_2 />}></Route>
                    <Route path="/page1-3" element={<Page1_3 />}></Route>
                  </Route>
                  <Route path="/page2" element={<Page2 />}>
                    <Route path="page2-1" element={<Page2_1 />}></Route>
                    <Route path="page2-2" element={<Page2_2 />}></Route>
                    <Route path="page2-3" element={<Page2_3 />}></Route>
                  </Route>
                  <Route path="/page3" element={<Page3 />}>
                    <Route path="page3-1" element={<Page3_1 />}></Route>
                    <Route path="page3-2" element={<Page3_2 />}></Route>
                    <Route path="page3-3" element={<Page3_3 />}></Route>
                  </Route>
                </Routes>
              </div>
            </DemoComponent.Provider>
          </BrowserRouter>
        </div>
      </Box>
    </>
  );
};

export default DEMO;
